<template>
  <div style="margin: 0 auto;width: 1100px; padding: 32px 0">
    <div style="text-align: center; font-size: 18px;font-weight: 500;color: #0C1523;margin-bottom: 20px">请选择您的店铺类型</div>
    <div style="margin: 0 auto;width: 880px; padding: 40px 56px;background-color: #ffffff">
      <div><span style="font-size: 16px;color: #0D0D0D">企业入驻</span> <a style="font-size: 12px">入驻材料须知</a></div>
      <a-row :gutter="10" style="margin-top: 24px">
        <a-col :span="6">
          <div :class="selectStore[0]?'select':'no-select'" @click="clickStore(0)">
            <div style="position: absolute;right: 8px;top: 8px;width: 24px;height: 24px;">
              <img v-if="!selectStore[0]" src="@/assets/img/noselect.png">
              <img v-if="selectStore[0]" src="@/assets/img/select.png">
            </div>
            <div><img src="@/assets/img/store1.png"></div>
            <div style="margin-top: 24px;font-size: 16px;color: #0D0D0D">普通店铺</div>
            <div style="display: inline-block;width: 16px;height: 2px;background: linear-gradient(90deg, rgba(153, 195, 255, 0) 0%, rgba(20, 118, 255, 1) 100%);border-radius: 1px;margin-top: 12px;"></div>
            <div style="margin-top: 12px;font-size: 12px;color: #BBBDBF">普通企业店铺</div>
          </div>
        </a-col>
        <a-col :span="6">
          <div :class="selectStore[1]?'select':'no-select'" @click="clickStore(1)">
            <div style="position: absolute;right: 8px;top: 8px;width: 24px;height: 24px;">
              <img v-if="!selectStore[1]" src="@/assets/img/noselect.png">
              <img v-if="selectStore[1]" src="@/assets/img/select.png">
            </div>
            <div><img src="@/assets/img/store2.png"></div>
            <div style="margin-top: 24px;font-size: 16px;color: #0D0D0D">专卖店</div>
            <div style="display: inline-block;width: 16px;height: 2px;background: linear-gradient(90deg, rgba(153, 195, 255, 0) 0%, rgba(20, 118, 255, 1) 100%);border-radius: 1px;margin-top: 12px;"></div>
            <div style="margin-top: 12px;font-size: 12px;color: #BBBDBF">地区代理1个品牌</div>
          </div>
        </a-col>
        <a-col :span="6">
          <div :class="selectStore[2]?'select':'no-select'" @click="clickStore(2)">
            <div style="position: absolute;right: 8px;top: 8px;width: 24px;height: 24px;">
              <img v-if="!selectStore[2]" src="@/assets/img/noselect.png">
              <img v-if="selectStore[2]" src="@/assets/img/select.png">
            </div>
            <div><img src="@/assets/img/store3.png"></div>
            <div style="margin-top: 24px;font-size: 16px;color: #0D0D0D">专营店</div>
            <div style="display: inline-block;width: 16px;height: 2px;background: linear-gradient(90deg, rgba(153, 195, 255, 0) 0%, rgba(20, 118, 255, 1) 100%);border-radius: 1px;margin-top: 12px;"></div>
            <div style="margin-top: 12px;font-size: 12px;color: #BBBDBF">地区代理≥2个品牌</div>
          </div>
        </a-col>
        <a-col :span="6">
          <div :class="selectStore[3]?'select':'no-select'" @click="clickStore(3)">
            <div style="position: absolute;right: 8px;top: 8px;width: 24px;height: 24px;">
              <img v-if="!selectStore[3]" src="@/assets/img/noselect.png">
              <img v-if="selectStore[3]" src="@/assets/img/select.png">
            </div>
            <div><img src="@/assets/img/store4.png"></div>
            <div style="margin-top: 24px;font-size: 16px;color: #0D0D0D">旗舰店</div>
            <div style="display: inline-block;width: 16px;height: 2px;background: linear-gradient(90deg, rgba(153, 195, 255, 0) 0%, rgba(20, 118, 255, 1) 100%);border-radius: 1px;margin-top: 12px;"></div>
            <div style="margin-top: 12px;font-size: 12px;color: #BBBDBF">地区独占授权</div>
          </div>
        </a-col>
      </a-row>
      <div style="margin-top: 24px"><span style="font-size: 16px;color: #0D0D0D">个体工商户入驻</span> <a style="font-size: 12px">入驻材料须知</a></div>
      <a-row :gutter="10" style="margin-top: 24px">
        <a-col :span="6">
          <div :class="selectStore[4]?'select':'no-select'" @click="clickStore(4)">
            <div style="position: absolute;right: 8px;top: 8px;width: 24px;height: 24px;">
              <img v-if="!selectStore[4]" src="@/assets/img/noselect.png">
              <img v-if="selectStore[4]" src="@/assets/img/select.png">
            </div>
            <div><img src="@/assets/img/store5.png"></div>
            <div style="margin-top: 24px;font-size: 16px;color: #0D0D0D">普通店铺</div>
            <div style="display: inline-block;width: 16px;height: 2px;background: linear-gradient(90deg, rgba(153, 195, 255, 0) 0%, rgba(20, 118, 255, 1) 100%);border-radius: 1px;margin-top: 12px;"></div>
            <div style="margin-top: 12px;font-size: 12px;color: #BBBDBF">需具备营业执照</div>
          </div>
        </a-col>
      </a-row>
      <div style="text-align: center;margin-top: 48px"><a-button type="primary" size="large" style="width: 200px">开始填写资料</a-button></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreInfo',
  data () {
    return {
      selectStore: [false, false, false, false, false]
    }
  },
  methods: {
    clickStore (index) {
      this.selectStore = [false, false, false, false, false]
      this.selectStore[index] = true
    }
  }
}
</script>

<style scoped>
.no-select {
  border: 2px #dddddd solid;
  border-radius: 8px;
  text-align: center;
  padding: 48px 0 32px 0;
  position: relative;
}
.select{
  border: 2px #3388FF solid;
  border-radius: 8px;
  text-align: center;
  padding: 48px 0 32px 0;
  position: relative;
}
</style>
